<template>
  <v-card flat height="660" class="pl-5 pr-5 pt-6">
    <v-row no-gutters>
      <v-col cols="2" class="pr-4">
        <v-select
          v-model="currentType"
          :items="types"
          solo
          dense
          hide-details
          class="white-input-24"
        ></v-select>
      </v-col>
      <v-col cols="3">
        <v-text-field
          v-model="search"
          placeholder="Keyword Search"
          solo
          class="white-input-24"
          dense
          hide-details
          append-outer-icon="mdi-magnify"
        ></v-text-field>
      </v-col>
    </v-row>
    <v-data-table
      v-model="selectedSynced"
      :headers="headers"
      :items="items"
      :search="search"
      :loading="loading"
      item-key="id"
      show-select
      class="elevation-0 form-info"
      hide-default-footer
    >
    </v-data-table>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component, Watch, PropSync } from "vue-property-decorator";
@Component({
  components: {},
})
export default class User extends Vue {
  @PropSync("selected", { type: Array, default: () => [] })
  selectedSynced!: object[];
  currentType = "Department";
  types = ["User", "Team", "Department"];
  // table
  search = "";
  get loading() {
    switch (this.currentType) {
      case "User":
        return this.userLoading;
      case "Team":
        return this.teamLoading;
      case "Department":
        return this.departmentLoading;
      default:
        return true;
    }
  }
  headers = [
    { text: "ID", value: "department" },
    { text: "User Name", value: "userName" },
    { text: "Tel", value: "tel" },
    { text: "Email", value: "email" },
  ];
  items: object[] = [];
  // User
  userFlag = false;
  userLoading = false;
  userItems: object[] = [];
  async getUserItems() {
    if (this.userFlag) return;
    this.userLoading = true;
    this.userFlag = true;
    return new Promise((res) => {
      setTimeout(() => {
        this.userItems = [
          {
            id: "1",
            department: "AC",
            userName: "Amy Chan",
            tel: "4893 4752",
            email: "AmyChan@gmail.com",
          },
          {
            id: "2",
            department: "MW",
            userName: "Mark Wong",
            tel: "4793 4831",
            email: "MarkWong@gmail.com",
          },
          {
            id: "3",
            department: "EC",
            userName: "Eric Chou",
            tel: "2486 7894",
            email: "EricChou@gmail.com",
          },
        ];
        this.userLoading = false;
        res(undefined);
      }, 700);
    });
  }
  // Team
  teamFlag = false;
  teamLoading = false;
  teamItems: object[] = [];
  async getTeamItems() {
    if (this.teamFlag) return;
    this.teamLoading = true;
    this.teamFlag = true;
    return new Promise((res) => {
      setTimeout(() => {
        this.teamItems = [
          {
            id: "4",
            userName: "Amy Chan",
            department: "CS",
          },
          {
            id: "5",
            userName: "Mark Wong",
            department: "FSE",
          },
          {
            id: "6",
            userName: "Eric Chou",
            department: "GD",
          },
        ];
        this.teamLoading = false;
        res(undefined);
      }, 1200);
    });
  }
  // Department
  departmentFlag = false;
  departmentLoading = false;
  departmentItems: object[] = [];
  async getDepartmentItems() {
    if (this.departmentFlag) return;
    this.departmentLoading = true;
    this.departmentFlag = true;
    return new Promise((res) => {
      setTimeout(() => {
        this.departmentItems = [
          {
            id: "7",
            department: "ADM",
            userName: "Admin",
          },
          {
            id: "8",
            department: "CS",
            userName: "Customer Service Team",
          },
          {
            id: "9",
            department: "FSE",
            userName: "Field Service Engineer",
          },
        ];
        this.departmentLoading = false;
        res(undefined);
      }, 1500);
    });
  }
  @Watch("currentType", { immediate: true })
  onCurrentTypeChange(type: string) {
    this.items = [];
    switch (type) {
      case "User":
        this.getUserItems().then(() => {
          this.items = this.userItems;
        });
        break;
      case "Team":
        this.getTeamItems().then(() => {
          this.items = this.teamItems;
        });
        break;
      case "Department":
        this.getDepartmentItems().then(() => {
          console.log(this.departmentItems);
          this.items = this.departmentItems;
        });
        break;
      default:
        break;
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/components/Customer/Dialog/User/User.scss";
</style>
